<template>
  <t-image
    :src="src"
    :fit="fit"
    :shape="shape"
    :style="{ width: cpWidth, height: height +'px' }"
    class="custom-image"
  >
    <template #loading>
      ...
    </template>
    <template #error>
      <t-image
        :src="errorImgSrcHpJpg"
        :fit="fit"
        :shape="shape"
        :style="{ width: cpWidth, height: height +'px' }"
        class="custom-image-error"
        v-if="errorShowHpJpg"
      >
        <template #loading>
          ...
        </template>
      </t-image>

      <t-image
        :src="errorImgSrcHpPng"
        :fit="fit"
        :shape="shape"
        :style="{ width: cpWidth, height: height +'px', background: 'transparent' }"
        class="custom-image-error"
        v-else-if="errorShowHpPng"
      >
        <template #loading>
          ...
        </template>
      </t-image>

      <t-image
        v-else
        :src="errorImgSrc"
        :fit="fit"
        :shape="shape"
        :style="{ width: cpWidth, height: height +'px' }"
        class="custom-image-error"
      >
        <template #loading>
          ...
        </template>
      </t-image>
    </template>
  </t-image>
</template>

<script>
export default {
  desc: '自定义图片',
  name: 'customImage',
  props: {
    /**
     * @Description：图片地址
     */
    src: {
      type: String,
      default: () => ''
    },
    /**
     * @Description：宽度
     */
    width: {
      type: Number,
      default: () => 40
    },
    /**
     * @Description：高度
     */
    height: {
      type: Number,
      default: () => 40
    },
    /**
     * @Description：图片填充模式。可选项：contain/cover/fill/none/scale-down
     */
    fit: {
      type: String,
      default: () => 'cover'
    },
    /**
     * @Description：图片圆角类型。可选项：circle/round/square
     */
    shape: {
      type: String,
      default: () => 'circle'
    },
    /**
     * @Description： 加载失败后显示医院Logo jpg
     */
    errorShowHpJpg: {
      type: Boolean,
      default: () => false
    },
    /**
     * @Description： 加载失败后显示医院Logo png
     */
    errorShowHpPng: {
      type: Boolean,
      default: () => false
    }
  },
  created() {
  },
  data() {
    return {
      errorImgSrc: require('@/assets/img/empty.jpg'),
      errorImgSrcHpJpg: require('@/assets/icon/dept/hp.jpg'),
      errorImgSrcHpPng: require('@/assets/icon/dept/hp.png'),
    }
  },
  methods: {
  },
  watch: {
  },
  computed: {
    cpWidth() {
      if (this.width <=0 ) {
        return 'auto'
      }
      return this.width + 'px'
    }
  }
}
</script>

<style lang="scss">
.custom-image-error{
  .t-image{
    position:  absolute;
  }
}

.custom-image .t-image--position-center{
}
</style>
